<!-- 动态表单设置组件 -->
<template>
  <div class="setUpForm" id="setUpForm">
    <!--  -->
    <LeftConfig
      class="LeftConfig"
      :tabCodeList="tabCodeList"
      :layout="layout"
      @layoutChange="emit('update:layout', $event)"
    />
    <CenterConfig
      class="CenterConfig"
      @choiceComponent="choiceComponent"
      :choiceUuid="componentObj.uuid"
      :setUpList="copySetUpList"
      :layout="layout"
    />
    <RightDrawer
      class="RightDrawer"
      ref="rightDrawer"
      v-model:componentObj="componentObj"
      @componentObjChange="componentObjChange"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, watch } from 'vue';
  import clonedeep from 'lodash.clonedeep';
  import LeftConfig from './components/left-config/index.vue';
  import CenterConfig from './components/center-config/index.vue';
  import RightDrawer from './components/right-drawer/index.vue';

  const props = withDefaults(
    //参数说明
    defineProps<{
      tabCodeList: string[]; // tab要显示的tabcode列表
      setUpList: any[]; // 组件列表
      layout: string; // a-form的layout属性
    }>(),
    {
      setUpList: () => [],
    }
  );

  const emit = defineEmits(['update:layout']);

  const copySetUpList = ref(clonedeep(props.setUpList));

  defineExpose({ copySetUpList }); // 抛出处理过后的列表
  watch(props.setUpList, (val: any) => {
    copySetUpList.value = clonedeep(val);
  });

  // 组件设置的参数
  const componentObj = reactive({
    code: null,
    componentType: null,
    props: null,
    required: 2,
    span: null,
    uuid: '',
    name: null,
    isMust: 2,
    isProcessConditions: 2,
  });
  const rightDrawer = ref(); // 获取rightDrawer元素
  //点击组件被选中时
  const choiceComponent = (element: any) => {
    componentObj.code = element.code;
    componentObj.componentType = element.componentType;
    componentObj.props = element.props;
    componentObj.required = element.required;
    componentObj.span = element.span;
    componentObj.uuid = element.uuid;
    componentObj.name = element.name;
    componentObj.isMust = element.isMust;
    componentObj.isProcessConditions = element.isProcessConditions;
    rightDrawer.value.visible = true;
  };
  //组件被设置时
  const componentObjChange = (data: any) => {
    const changeIndex = copySetUpList.value.findIndex(
      (item: any) => item.uuid === componentObj.uuid
    );
    copySetUpList.value[changeIndex].name = data.name;
    copySetUpList.value[changeIndex].span = data.span;
    copySetUpList.value[changeIndex].required = data.required;
    copySetUpList.value[changeIndex].isMust = data.isMust;
    copySetUpList.value[changeIndex].isProcessConditions =
      data.isProcessConditions;
    copySetUpList.value[changeIndex].props = { ...data.props };
  };
</script>

<style lang="less" scoped>
  .setUpForm {
    // position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: rgb(243, 243, 243);
    height: 100%;
  }
  .LeftConfig {
    width: 15%;
    overflow-x: hidden;
    height: 100vh;
  }

  .LeftConfig::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 0; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .CenterConfig {
    width: 50%;
    height: 100vh;
    border-radius: 4px;
    // -moz-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    // -webkit-box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);
    // box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.349019607843137);/
    box-shadow: 0 0 10px #ccc inset;
    padding: 16px;
    margin: 16px;
  }
  .RightDrawer {
    width: 15%;
    height: 100vh;
  }
</style>
